<template>
  <div class="container">
    <el-card>
      <!-- 顶部提示 -->
      <el-row>
        <el-col class="toptitle">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 顶部提示 end -->
      <!-- 顶部搜索表单 -->
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="query.subjectID"
                placeholder="请选择"
                style="width:100%;"
                @input="Jsimpless"
              >
                <el-option
                  v-for="item in subjectID"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="query.catalogID" style="width:100%;" placeholder="请选择">
                <el-option
                  v-for="item in Jsimplesslist"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="query.Label" style="width:100%;" placeholder="请选择">
                <el-option
                  v-for="item in LabeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="query.keyword" placeholder="根据题干搜索" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第一行结束-->
        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="query.questionType" style="width:100%;" placeholder="请选择">
                <el-option label="单选" value="danxuan" />
                <el-option label="多选" value="duoxuan" />
                <el-option label="简答" value="jianda" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="query.difficulty" style="width:100%;" placeholder="请选择">
                <el-option label="简单" value="shanghai" />
                <el-option label="一般" value="beijing" />
                <el-option label="困难" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="query.direction" style="width:100%;" placeholder="请选择">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="query.creatorID" style="width:100%;" placeholder="请选择">
                <el-option
                  v-for="item in Jsimple"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行结束 -->
        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="query.remarks" />
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="query.shortName" />
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item class="city-box" label="城市">
              <el-select v-model="query.province" class="city-1" placeholder="请选择" @input="panmes">
                <el-option
                  v-for="item in provinces"
                  :key="item.id"
                  :label="item"
                  :value="item"
                />
              </el-select>

              <el-select v-model="query.city" class="city-2" placeholder="请选择">
                <el-option v-for="(v, k, i) in citys" :key="i" :label="v" :value="v" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button size="small" @click="Clear">清除</el-button>
            <el-button size="small" type="primary" @click="search"> 搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 第三行结束 -->
      <el-alert :title="title" type="info" :closable="closables" show-icon />

      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="试题编号" width="180" />
        <el-table-column prop="subject" label="学科" width="180" />
        <el-table-column prop="catalog" label="目录" />
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <div v-html="JquestionType(scope.row.questionType)" />
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <div v-html="JaddDate(scope.row.addDate)" />
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template slot-scope="scope">
            <div v-html="Difficulty(scope.row.difficulty)" />
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              plain
              circle
              @click="detail(scope.row)"
            />
            <el-button
              type="success"
              icon="el-icon-edit"
              plain
              circle
              @click="update(scope.row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="Jdelete(scope.row.id)"
            />
            <el-button
              type="warning"
              icon="el-icon-check"
              plain
              circle
              @click="choiceAdd(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :page-sizes="[5, 15, 20, 25]"
        :page-size="page.pagesize"
        :current-page="page.page"
        :total="sum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 预览弹出框 -->
      <questions-preview :dialog-visible="dialogVisible" :question-item="questionItem" @close="dialogVisible = false" />
    </el-card>
  </div>
</template>

<script>
import {
  list, // 导入基础题库列表
  detail, // 导入基础题库详情
  remove, // 导入基础题库删除
  choiceAdd // 导入精选题库加入取消
} from '@/api/hmmm/questions'

import {
  list as subjectslist // 导入科目列表
} from '@/api/hmmm/subjects.js'

// 用户列表
import { simple } from '@/api/base/users'
// 二级目录
import { simple as Jsimpless } from '@/api/hmmm/directorys'
// 标签
import { simple as Jtags } from '@/api/hmmm/tags'
// 所有城市
import { provinces, citys } from '@/api/hmmm/citys'
// 导入预览框
import questionsPreview from '../components/questions-preview'

// 时间格式化
import dayjs from 'dayjs'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      closables: false,
      query: {
        page: 1, // 当前页数
        pagesize: 5, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        counts: null
      },
      subjectID: [],
      tableData: [], // 数据列表
      page: {
        pagesize: 5, // 每页多少条
        page: 1 // 当前页
      },
      jSubject: [], // 学科
      direction: [
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      Jsimple: [], // 用户列表
      Jsimplesslist: [], // 二级列表
      LabeList: [], // 标签目录
      sum: 0, // 总条数
      title: '',
      form: {
        // 弹出框数组
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      size: '',
      Preview: {}, // 预览数组
      radio: '', // 单选
      videoo: false, // 控制视频显示
      provinces: [],
      citys: [],
      xuanxiangLISt: [],
      questionItem: {}, // 预览时传入子组件的试题
      dialogVisible: false, // 控制弹出框显示与隐藏
      counts: ''
    }
  },
  created () {
    this.list()
    this.subjects()
    // 调用用户列表
    this.simple()
    // 城市渲染
    this.provinces = provinces()
  },
  methods: {
    // 点击新增跳转到试题录入
    onSubmit () {
      this.$router.push('/questions/new')
    },
    // 获取学科列表
    async subjects () {
      const res = await subjectslist()
      this.subjectID = res.data.items
    },
    // 获取数据列表
    async list () {
      const res = await list(this.page)
      this.tableData = res.data.items
      const reslist = await list()
      this.sum = 0
      reslist.data.items.forEach((item) => {
        this.sum++
      })
      this.title = `一共有${this.sum}条数据`
    },
    // 获取二级列表
    async Jsimpless () {
      const res = await Jsimpless({ subjectID: this.query.subjectID })
      const Jres = await Jtags({ subjectID: this.query.subjectID })
      this.LabeList = Jres.data
      this.Jsimplesslist = res.data
    },
    // 难度转换
    Difficulty (num) {
      if (num === '1') return '简单'
      if (num === '2') return '一般'
      if (num === '3') return '困难'
    },
    // 题型转换
    JquestionType (type) {
      if (type === '1') return '单选'
      if (type === '2') return '多选'
      if (type === '3') return '简答'
    },
    // 时间转化
    JaddDate (day) {
      const days = dayjs(day).format('YYYY-MM-DD HH:mm:ss')
      return days
    },
    // 用户列表
    async simple () {
      const res = await simple()
      this.Jsimple = res.data
    },
    async detail (item) {
      // 显示对话框
      const { data } = await detail(item.id)
      data.questionType = item.questionType
      data.subject = item.subject
      this.dialogVisible = true
      // 传入试题
      this.questionItem = data
    },
    // 城市地区渲染
    panmes () {
      this.citys = []
      this.citys = citys(this.query.province)
    },
    // 清除功能
    Clear () {
      this.query = {}
    },
    // 搜索功能
    async search () {
      const res = await list({ ...this.query, ...this.page })
      this.tableData = res.data.items
      this.counts = res.data.counts
      this.title = `一共有${this.counts}条数据`
    },
    // 编辑功能
    update (ids) {
      this.$router.push({
        path: '/questions/new',
        query: { id: ids }
      })
    },
    // 删除功能
    Jdelete (ids) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove({ id: ids })// eslint-disable-line no-unused-vars
          this.list()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选题库
    choiceAdd (ids) {
      this.$confirm('此操作将此项加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await choiceAdd({ id: ids, choiceState: 1 })// eslint-disable-line no-unused-vars
          this.list()
          this.$router.push({ path: '/questions/choice' })
          this.$message({
            type: 'success',
            message: '加入精选题库成功!'
          })
        })
        .catch((e) => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.list()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.list()
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin: 10px;
  .toptitle {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .city-1 {
    width: 45%;
    margin-right: 5%;
  }
  .city-2 {
    width: 50%;
  }
  .el-input__inner {
    width: 100%;
  }
  .el-pagination {
    position: relative;
    left: 780px;
    top: 10px;
  }
}
</style>
